<template>
  <div class="flex flex-col flex-grow" style="min-height: 0;">
    <div class="flex" >
      <a-tabs v-model:activeKey="activeKey" type="card" @change="tabSwitch">
        <a-tab-pane key="0" tab="市场概况" >
         
        </a-tab-pane>
        <a-tab-pane key="1" tab="公告" >
         
        </a-tab-pane>
        <a-tab-pane key="2" tab="课程">
       
        </a-tab-pane>
        <a-tab-pane key="3" tab="Newsletter">
       
        </a-tab-pane>
        <!-- <a-tab-pane key="4" tab="帮助中心">
        
        </a-tab-pane> -->
      </a-tabs>
     </div>
     <div class="flex  w-full justify-center divscroll"  :style="{height: divheight}">
        <MarketFront v-show="activeKey==0" ref="marketFrontRef"/>
        <GonggaoFront v-show="activeKey==1" ref="gonggaoFrontRef"/>
        <KechengFront v-show="activeKey==2" ref="kechengFrontRef"/>
        <NewsFront v-show="activeKey==3" ref="newsFrontRef"/>
        <HelpFront v-show="activeKey==4" ref="helpFrontRef"/>
     </div>
  </div>
</template>

<script lang="ts">

import { ref,defineComponent,onMounted } from 'vue';
import { Tabs } from 'ant-design-vue';
import GonggaoFront from '/@/views/dp/xinwen/gonggao.vue';
import MarketFront from '/@/views/dp/xinwen/market.vue';
import KechengFront from '/@/views/dp/kecheng/frontlist.vue';
import NewsFront from '/@/views/dp/xinwen/newsfrontlist.vue';
import HelpFront from '/@/views/dp/xinwen/helpfrontlist.vue';

import { useRoute } from 'vue-router'
export default defineComponent({
  components: {
    ATabs:Tabs
  },
})
</script>

<script lang="ts" setup>  
  const activeKey=ref("0");
  const divheight=ref(0);
  const kechengFrontRef=ref();
  const marketFrontRef = ref();
  const gonggaoFrontRef = ref();
  const newsFrontRef = ref();
  const helpFrontRef = ref();
  const router = useRoute();

  onMounted(() => {
      divheight.value=window.innerHeight-80+'px';
      if(router.query.activeKey) {
        activeKey.value = router.query.activeKey
      }
  });

  function tabSwitch(value){
    if(value=='0'){
      marketFrontRef.value.loadPageDatas();
    }else if(value=='1') {
      gonggaoFrontRef.value.getNewslist();
    }else if(value=='2') {
      kechengFrontRef.value.reloadKclist();
    }else if(value=='3') {
      newsFrontRef.value.reloadNewList();
    }else if(value=='4') {
      newsFrontRef.value.getNewslist();
    }
  }
</script>
<style>
  .divscroll{
     overflow: auto; /* 使div可滚动 */
    scrollbar-width: none; /* 对于Firefox */
  }
</style>